<template>
  <el-dialog
    title="Add Children"
    :visible.sync="visible"
    :close-on-click-modal="false"
    width="40%"
    append-to-body
    :before-close="handleClose"
  >
  <el-form :model="form" ref="form" label-width="120px" :hide-required-asterisk="true">
    <el-form-item 
      :label="$t('custom.component.gadget.dimension')"
      prop="dimension"
      :rules="[
        {required:true,trigger:'change',message:'Dimension required'}
      ]"
    >
      <el-select v-model="form.dimension" style="width: 100%">
        <el-option v-for="item in source" :label="item" :value="item" :key="item"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item 
      :label="$t('custom.component.gadget.measure')"
      prop="measure"
      :rules="[
        {required:true,trigger:'change',message:'Measure required'}
      ]"
    >
      <el-select v-model="form.measure" style="width: 100%">
        <el-option v-for="item in source" :label="item" :value="item" :key="item"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <el-row type="flex" justify="end" style="margin-top:50px">
    <el-button size="small" @click="handleCancel">Cancel</el-button>
    <el-button type="primary" size="small" :loading="loading" @click="handleConfirm">Confirm</el-button>
  </el-row>
</el-dialog>
</template>
<script>
export default {
  props:{
    visible:{
      type:Boolean,
      default:false
    },
    source:{
      type:Array,
      default:() => {
        return []
      }
    },
    data:{
      type:Array,
      default:() => {
        return []
      }
    },
    current:{
      type:Object,
      default:() => {
        return {}
      }
    }
  },
  data(){
    return {
      form:{
        dimension:null,
        measure:null
      },
      loading:false
    }
  },
  created(){
    this.$root.eventBus.$on('sunburst-data',(data) => {
      // this.tableData = this.formatDataToEchart(data)
    })
  },
  methods:{
    handleCancel(){
      this.$refs.form.resetFields()
      this.$emit('update:visible',false)
    },
    handleConfirm(){
      this.loading = true;
      this.$refs.form.validate((valid) => {
          if (!valid) {
            return false
            this.loading = false
          }

          const X = this.form.dimension
          const Y = this.form.measure
          let formatData = []
          this.current.childrenData.filter(v => v[X] !== null || v[Y] !== null).forEach(item => {
            const obj = {
              name:item[X],
              value:item[Y],
              dimension:X,
              measure:Y,
              childrenData:this.current.childrenData.filter(v => v[X] === item[X]),
              ...item
            }
            if(item[this.current.dimension] === this.current.name){
              const Index = formatData.findIndex((v) => {
                return v.name === obj.name
              })
              if(Index < 0){
                formatData.push(obj)
              }else{
                formatData[Index].value += parseFloat(obj.value)
              }
            }
            
          })
          this.$emit('children-data',formatData)
          this.handleCancel()
          this.loading = false

      });
    },
    handleClose(done){
      this.$emit('update:visible',false)
      done()
    }
  },
  destroyed(){
    this.$root.eventBus.$off('sunburst-data')
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item{
  margin-bottom: 20px!important;
}
</style>